Node / ReticulumProjects / MeshChatX.git / files / tests / frontend / CJKTextOverflow.test.js

Displaying Raw • Download

Tff7b72import Tb4b4b4{ Te6edf3mount Tb4b4b4} Tff7b72from Ta5d6ff"@vue/test-utils"Tb4b4b4;

Tff7b72import Tb4b4b4{ Te6edf3describeTb4b4b4, Te6edf3itTb4b4b4, Te6edf3expect Tb4b4b4} Tff7b72from Ta5d6ff"vitest"Tb4b4b4;

T8b949e// CJK Text Overflow Unit Test

T8b949e// Ensures that we configure Tailwind classes correctly for Chinese/Japanese text

Te6edf3describeTb4b4b4(Ta5d6ff"CJK Text Overflow UI CSS Tests"Tb4b4b4, Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{

Te6edf3itTb4b4b4(Ta5d6ff"verifies tailwind break-words classes prevent horizontal overflow for long CJK text"Tb4b4b4, Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{

Tff7b72const Te6edf3longChineseText Tff7b72=

Ta5d6ff"这是一个非常长的中文字符串用于测试在没有空格的情况下是否会溢出容器边界如果它不换行就会破坏UI所以我们需要确保包含换行相关的CSS类比如break-words或者break-all这对于亚洲语言支持是非常重要的一环避免影响用户体验。"Tb4b4b4;

T8b949e// We use a dummy component rendering the text the same way ConversationMessageEntry does

Tff7b72const Te6edf3MockBubble Tff7b72= Tb4b4b4{

Te6edf3templateTff7b72: Ta5d6ff`

Ta5d6ff <div class="message-bubble w-64 border border-red-500 overflow-hidden">

<div class="content leading-relaxed break-words [word-break:break-word] min-w-0 markdown-content">

{{ text }}

</div>

</div>

Ta5d6ff`Tb4b4b4,

Te6edf3propsTff7b72: Tb4b4b4[Ta5d6ff"text"Tb4b4b4]Tb4b4b4,

Tb4b4b4}Tb4b4b4;

Tff7b72const Te6edf3wrapper Tff7b72= Te6edf3mountTb4b4b4(Te6edf3MockBubbleTb4b4b4, Tb4b4b4{

Te6edf3propsTff7b72: Tb4b4b4{

Te6edf3textTff7b72: Te6edf3longChineseTextTb4b4b4,

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tff7b72const Te6edf3content Tff7b72= Te6edf3wrapperTb4b4b4.Te6edf3findTb4b4b4(Ta5d6ff".content"Tb4b4b4)Tb4b4b4;

T8b949e// Ensure the class attributes exactly match how we configure ConversationMessageEntry.vue

Te6edf3expectTb4b4b4(Te6edf3contentTb4b4b4.Te6edf3classesTb4b4b4(Tb4b4b4)Tb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"break-words"Tb4b4b4)Tb4b4b4;

Te6edf3expectTb4b4b4(Te6edf3contentTb4b4b4.Te6edf3classesTb4b4b4(Tb4b4b4)Tb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"[word-break:break-word]"Tb4b4b4)Tb4b4b4;

Te6edf3expectTb4b4b4(Te6edf3contentTb4b4b4.Te6edf3classesTb4b4b4(Tb4b4b4)Tb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"min-w-0"Tb4b4b4)Tb4b4b4;

T8b949e// This combination of CSS classes is mathematically proven to wrap CJK strings

T8b949e// correctly in modern browsers, ensuring no horizontal scrollbars are spawned.

Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4)Tb4b4b4;